<template>
    <div class="userbox">
        <div class="searchboxc">
            <el-input placeholder="请输入内容" v-model="search" class="input-with-select"></el-input>
            <el-button slot="append" icon="el-icon-search" @click="search1"></el-button>
            <el-button type="primary" @click="dialogFormVisible = true">添加用户</el-button>
        </div>
        <!-- //表格 -->
        <el-table :data="userlist" border style="width: 100%">
            <el-table-column type="index" label="#">
            </el-table-column>
            <el-table-column prop="username" label="姓名">
            </el-table-column>
            <el-table-column prop="email" label="邮箱">
            </el-table-column>
            <el-table-column prop="create_time" label="电话">
            </el-table-column>
            <el-table-column prop="role_name" label="角色">
            </el-table-column>
            <el-table-column prop="address" label="状态">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.mg_state" active-color="#13ce66" inactive-color="#ff4949">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- //添加用户 -->
        <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="用户名">
                    <el-input v-model="form.username" :disabled="isedit"></el-input>
                </el-form-item>
                <el-form-item label="密码" v-if="isedit == false">
                    <el-input v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="form.email"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="form.mobile"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addusers">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getuser, adduser } from '.././utils/api'
export default {
    data() {
        return {
            search: '',
            page: {
                pagenum: 1,
                pagesize: 100,
            },
            userlist: [],
            dialogFormVisible: false,
            form: {
                username: '', password: '',
                email: '', mobile: '',
            },
            isedit: false

        }
    },
    methods: {
        getusers() {
            getuser(this.page).then((res) => {
                console.log(res.data.data.users);
                this.userlist = res.data.data.users
                this._userlist = JSON.stringify(this.userlist)
            })
        },
        //添加
        addusers() {
            console.log(this.form);
            this.isedit = false
            adduser(this.form).then((res) => {
                console.log(res);
            })
            this.dialogFormVisible = false;
            this.form = {}
            this.getusers()
        },
        //搜索
        search1() {
            console.log(this.search);
            var arr = JSON.parse(this._userlist)
            this.userlist = arr.filter((item) => {
                return item.username.includes(this.search)
            })
        },
        //编辑
        handleEdit(obj) {
            console.log(obj);
            this.isedit = true
            this.dialogFormVisible = true;
            this.form = { ...obj }
        }
    },
    created() {
        this.getusers()
        this.addusers()
    },
    mounted() {

    },
    components: {

    },
    computed: {

    },
    watch: {

    },
}
</script>

<style lang='scss' scoped>
.userbox {
    width: 100%;
    height: 100vh;
    background-color: #fff;
}

.searchboxc {
    display: flex;
}
</style>
